import { render2ColumnWithCollapse } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonTextarea } from '@/pages/OrderModule/common/components/CommonTextarea';
import CommonInput from '@/pages/OrderModule/common/components/CommonInput';
import { useAddress } from '@/pages/OrderModule/common/hooks/useAddress';
import { Select, Typography } from 'antd';
import { telMobile } from '@/utils/rule';
const { Paragraph } = Typography;

export function useEditAddressField({ collapseAble, title, form, resetKey, onChange, onRecognize }) {
  const keyMap = {
    userKey: 'user',
    phoneKey: 'phone',
    provinceKey: 'province',
    cityKey: 'city',
    areaKey: 'area',
    addressKey: 'address',
  };
  
  const {
    data: AddressData,
    loading: AddressDataLoading,
    addressRecognition,
    withProvinceProps,
    withCityProps,
    withAreaProps,
    withAddressRecognitionProps,
    resizeFormByServe
  } = useAddress({
    form,
    resetKey,
    onRecognize,
    ...keyMap,
  });

  return {
    field: render2ColumnWithCollapse({
      params: {
        title: title ? title : {},
        key: 'addressInfo',
        collapseAble,
      },
      columns: [
        [
          {
            label: '',
            name: keyMap.userKey,
            Component: CommonInput,
            props: {
              placeholder: '请选择收件人',
              maxLength: 30,
            },
            rules: [{required: true, message: '请选择收件人' }]
          },
          {
            label: '',
            name: keyMap.phoneKey,
            Component: CommonInput,
            props: {
              placeholder: '请输入手机号或固话或虚拟号',
            },
            rules: [{required: true, message: '请输入联系方式' }, telMobile]
          },
        ],
        [
          {
            label: '',
            name: keyMap.provinceKey,
            Component: Select,
            props: withProvinceProps({
              allowClear: true,
              showSearch: true,
              filterOption:(input, option) => {
                return (option?.name ?? '').toLowerCase().includes(input.toLowerCase())
              },
              onChange:(value, option)=>value && onChange?.(value, option, keyMap.provinceKey),
              placeholder: <span className='lable-require'>请选择省</span>,
            }),
            rules: [{required: true, message: '请选择省' }]
          },
          {
            label: '',
            name: keyMap.cityKey,
            Component: Select,
            props: withCityProps({
              allowClear: true,
              showSearch: true,
              filterOption:(input, option) => {
                return (option?.name ?? '').toLowerCase().includes(input.toLowerCase())
              },
              onChange:(value, option)=>value && onChange?.(value, option, keyMap.cityKey),
              placeholder: <span className='lable-require'>请选择市</span>,
            }),
            rules: [{required: true, message: '请选择市' }]
          },
        ],
        [
          {
            label: '',
            name: keyMap.areaKey,
            Component: Select,
            props: withAreaProps({
              allowClear: true,
              showSearch: true,
              filterOption:(input, option) => {
                return (option?.name ?? '').toLowerCase().includes(input.toLowerCase())
              },
              onChange:(value, option)=>value && onChange?.(value, option, keyMap.areaKey),
              placeholder: <span className='lable-require'>请选择区</span>,
            }),
            rules: [{required: true, message: '请选择区' }]
          },
          {
            block: <></>,
          },
        ],
        [
          {
            label: '',
            name: keyMap.addressKey,
            Component: CommonTextarea,
            props: {
              showCount: true,
              placeholder: '请输入详细地址',
              maxLength: 500,
              style: {
                height: 100,
              },
              onBlur: (e) => onChange?.(undefined, { name: e.target.value }, keyMap.addressKey)
            },
            rules: [{required: true, message: '请输入详细地址' }]
          },
          {
            label: '',
            slot: <>
            <CommonTextarea {...withAddressRecognitionProps({
              placeholder: '地址识别粘贴地址回车后自动识别，示例如下：',
              showCount: true,
              maxLength: 100,
              style: {
                height: 100,
              },
            })} />
            <Paragraph copyable={{tooltips: false}}>张三，15712345678，广东省 广州市 天河区 平安大厦</Paragraph>
            </>,
            // Component: CommonTextarea,
            // props: withAddressRecognitionProps({
            //   showCount: true,
            //   maxLength: 100,
            //   style: {
            //     height: 100,
            //   },
            // }),
          },
        ],
      ],
    }),
    resizeFormByServe
  };
}
